<template>
  <div class="node-config">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="100px"
      class="config-form"
    >
      <!-- 基本信息 -->
      <el-form-item label="节点类型">
        <el-tag>{{ node.type }}</el-tag>
      </el-form-item>

      <!-- 输入参数配置 -->
      <template v-if="node.inputs">
        <div class="param-section">
          <h4>输入参数</h4>
          <template v-for="(value, key) in node.inputs" :key="key">
            <el-form-item :label="key">
              <!-- 文本输入 -->
              <el-input
                v-if="isTextInput(value)"
                v-model="formData.inputs[key]"
                :placeholder="`请输入${key}`"
              />

              <!-- 数字输入 -->
              <el-input-number
                v-else-if="isNumberInput(value)"
                v-model="formData.inputs[key]"
                :min="getParamMin(value)"
                :max="getParamMax(value)"
                :step="getParamStep(value)"
              />

              <!-- 选择器 -->
              <el-select
                v-else-if="isSelectInput(value)"
                v-model="formData.inputs[key]"
                :placeholder="`请选择${key}`"
              >
                <el-option
                  v-for="option in getParamOptions(value)"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>

              <!-- 开关 -->
              <el-switch
                v-else-if="isBooleanInput(value)"
                v-model="formData.inputs[key]"
              />
            </el-form-item>
          </template>
        </div>
      </template>

      <!-- 高级配置 -->
      <el-collapse>
        <el-collapse-item title="高级配置" name="advanced">
          <el-form-item label="节点ID">
            <el-input v-model="formData.id" disabled />
          </el-form-item>
          <el-form-item label="位置">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-input-number
                  v-model="formData.position.x"
                  :step="10"
                  label="X"
                />
              </el-col>
              <el-col :span="12">
                <el-input-number
                  v-model="formData.position.y"
                  :step="10"
                  label="Y"
                />
              </el-col>
            </el-row>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>

      <!-- 操作按钮 -->
      <div class="form-actions">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import type { WorkflowNode } from '@/types/workflow'

const props = defineProps<{
  node: WorkflowNode
}>()

const emit = defineEmits<{
  (e: 'update', node: WorkflowNode): void
}>()

const formRef = ref<FormInstance>()
const formData = reactive<WorkflowNode>(JSON.parse(JSON.stringify(props.node)))

// 判断参数类型
const isTextInput = (value: any) => typeof value === 'string'
const isNumberInput = (value: any) => typeof value === 'number' || value?.type === 'number'
const isBooleanInput = (value: any) => typeof value === 'boolean'
const isSelectInput = (value: any) => Array.isArray(value?.options)

// 获取参数配置
const getParamMin = (value: any) => value?.min ?? -Infinity
const getParamMax = (value: any) => value?.max ?? Infinity
const getParamStep = (value: any) => value?.step ?? 1
const getParamOptions = (value: any) => value?.options ?? []

// 保存配置
const save = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    emit('update', formData)
    ElMessage.success('保存成功')
  } catch (error) {
    console.error('Validation failed:', error)
    ElMessage.error('表单验证失败')
  }
}

// 重置表单
const reset = () => {
  Object.assign(formData, JSON.parse(JSON.stringify(props.node)))
}

// 初始化
onMounted(() => {
  reset()
})
</script>

<style scoped lang="scss">
.node-config {
  padding: 20px;

  .param-section {
    margin: 16px 0;

    h4 {
      margin: 0 0 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid #eee;
    }
  }

  .form-actions {
    margin-top: 24px;
    text-align: right;
  }
}
</style> 